<template>

    <h3>开启深色模式</h3>
    <van-button type="primary" @click="selectFont">大字模式</van-button>
    <div>{{ fsStore.baseSize }}</div>

    <van-field name="switch" label="深色模式">
        <template #input>
            <van-switch v-model="store.isDark" />
        </template>
    </van-field>


    <van-button type="primary" @click="toLsd">具體專題</van-button>

    <van-divider />

    <h3>
        国际化 (<span>{{ $t('msg.hello') }}</span
        >)
    </h3>
    <van-radio-group v-model="checkedLang">
        <van-cell-group inset>
            <van-cell title="葡文" clickable>
                <template #right-icon>
                    <van-radio name="pt-BR" />
                </template>
            </van-cell>
            <van-cell title="繁体中文" clickable>
                <template #right-icon>
                    <van-radio name="zh-HK" />
                </template>
            </van-cell>
        </van-cell-group>
    </van-radio-group>

    <van-divider />

    <h3>api请求</h3>
    <van-button type="primary" @click="getUserInfo">发起请求</van-button>
    <p>{{ apiData }}</p>

    <van-divider />

    <p>
        将 ConfigProvider 组件的 theme 属性设置为 dark，可以开启深色模式。
        深色模式会全局生效，使页面上的所有 Vant 组件变为深色风格。
    </p>

    <p>
        <van-button type="primary" @click="showConfirm">点我点我</van-button>
    </p>

    <van-divider />

    <div class="my-box">移动端适配：px(300)</div>

    <div style="width: calc(375 * var(--r)); height: 200px; background-color: #ffd01e">
        移动端适配：内联样式<br />
        style="width: calc(375*var(--r));"
    </div>
    <van-popup v-model:show="showPicker" round position="bottom">
        <van-picker
            v-model="selectValue"
            :columns="columns"
            @cancel="showPicker = false"
            @confirm="onConfirm"
        />
    </van-popup>
</template>

<script setup>
import { computed, ref, reactive } from 'vue';
import { useRouter } from 'vue-router';
import { useStore, fontSizeStore } from '@/stores/store';
import { changeLang } from '@/lang';
import { showConfirmDialog } from 'vant';
import { setRem } from '../utils/rem';

// 模拟数据请求
import '@/utils/mock';
import { getInfo } from '@/api/user';

const store = useStore();

const checkedLang = computed({
    get() {
        return store.currentLang;
    },
    set(lang) {
        changeLang(lang);
    }
});

// 订阅状态
store.$subscribe((mutation, state) => {
    localStorage.setItem('isDarkTheme', state.isDark || false);
});

const apiData = ref(null);

function showConfirm() {
    showConfirmDialog({
        title: '标题',
        message: '如果解决方法是丑陋的，那就肯定还有更好的解决方法，只是还没有发现而已。'
    })
        .then(() => {
            // on confirm
        })
        .then(() => {
            // on confirm
        })
        .catch(() => {
            // on cancel
        });
}
const fsStore = fontSizeStore();
const showPicker = ref(false);
const columns = reactive([]);
const selectValue = ref([]);
selectValue.value = [fsStore.baseSize];
for (let i = 0; i < 20; i++) {
    columns.push({
        text: fsStore.baseSize + i,
        value: fsStore.baseSize + i
    });
}

function selectFont() {
    showPicker.value = true;
}
const router = useRouter();
function toLsd() {
    router.push({
        path: '/lsd01',
    })
}
function getUserInfo() {
    getInfo()
        .then((res) => {
            console.log(`res=>`, res);
            apiData.value = res;
        })
        .catch((err) => {
            console.log(`err=>`, err);
        });
}

function onConfirm(e) {
    fsStore.setBaseSize(e.selectedValues[0]);
    setRem();
    showPicker.value = false;
}
</script>

<style lang="scss" scoped>
.my-box {
    width: px(300);
    height: px(300);
    font-size: 18PX;
    background-color: #66b4b4;
}

.ll {
  background-color: #f3eac5;
  display: inline-block;
  width: px(187.5);
}
.rr {
  background-color: #66b4b4;
  display: inline-block;
  width: px(187.5);
}
</style>
